<template>
	<view class="player" v-if="store.state.isShowPlayer">
		<view class="mini-player">
			<view class="pic">
				<image :src="state.pic"></image>
			</view>
			<view class="song">
				<text class="name">{{ state.name }}</text>
				<text class="author">- {{ state.author }}</text>
			</view>
			<view class="player-control">
				<uni-icons custom-prefix="iconfont" type="icon-bofang" size="22"></uni-icons>
				<uni-icons type="list" size="22"></uni-icons>
			</view>
		</view>
		<view class="max-player"></view>
	</view>
</template>

<script setup>
import {useStore} from 'vuex'

const store = useStore()
</script>

<style lang="scss">
	.player {
		position: fixed;
		bottom: 100rpx;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		box-shadow: 0 -6rpx 10rpx #eee;

		.mini-player {
			display: flex;
			height: 100%;
			align-items: center;
			padding: 0 30rpx;

			.pic {
				flex: 0 0 80rpx;
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 10rpx solid #000;
					box-sizing: border-box;
				}
			}

			.song {
				flex: 1;
				margin: 0 20rpx;

				.name {
					font-size: 28rpx;
					color: #333;
				}

				.author {
					font-size: 26rpx;
					color: #999;
				}
			}

			.player-control {
				flex: 0 0 100rpx;
				display: flex;
				justify-content: space-between;

				.iconfont {
					font-weight: bold;
					font-size: 36rpx;
				}

				.icon-bofanganniu {
					width: 40rpx;
					height: 40rpx;
					border: 1px solid #aaa;
					border-radius: 50%;
					position: relative;

					&::before {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}
</style>